<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">发送请求</button>

<script>
let btn = document.querySelector('.btn')

btn.onclick = function (){
    ajax({// option
        // data: 'a=1&b=2',// 查询字符串的参数
        data: {// 对象格式的参数
            a:123,
            b:456
        },
        type: 'get',
        url: 'http://localhost:8080/users/list',
        timeout: 3000,// 设置超时
        cache: false,// 不读取缓存
        dataType: 'json',// 预期返回的数据类型 text json xml
    })
    .then((res)=>{
        console.log( res )
    })
    .catch((err)=>{
        console.log( err )
    })

    // 取消请求
    // ajax.xhr.abort()
}

function ajax(option){
    return new Promise((resolve,reject)=>{    
        // 解构参数
        let {type,url,data,timeout=0,cache=true,dataType='text'} = option

        // 1.创建一个数据交互对象
        let xhr = new XMLHttpRequest()

        ajax.xhr = xhr

        // 设置超时
        xhr.timeout = timeout

        // 判断data是否为对象
        // console.log( Object.prototype.toString.call({}) )// '[object Object]'
        // console.log( Object.prototype.toString.call([]) )// '[object Array]'
        if (Object.prototype.toString.call(data) === '[object Object]') {
            // data是对象，格式化为查询字符串
            let tmp = ''
            for (let key in data){
                tmp += key+'='+data[key]+'&'
            }
            // console.log( tmp )// 'a=1&b=2&'
            data = tmp.substr(0,tmp.length-1)// 去掉最后的'&'
        }

        // 判断请求方式
        if (type.toLowerCase() === 'get') {
            if (cache) {
                // 2.初始化请求（设置请求地址、请求方式等）
                xhr.open(type,url+'?'+data,true)
            } else {
                // 2.初始化请求（设置请求地址、请求方式等）
                xhr.open(type,url+'?'+data+'&_='+Date.now(),true)
            }
            // 3.将请求发送到服务端
            xhr.send(null)
        }
        else if (type.toLowerCase() === 'post'){
            // 2.初始化请求（设置请求地址、请求方式等）
            xhr.open(type,url)

            // 3.设置请求头（告诉服务端发送的数据格式）
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

            // 4.将请求发送到服务端
            xhr.send(data)
        }
        else{
            alert('亲，目前只支持get和post请求')
            return
        }

        // 5.等待 请求 状态改变
        xhr.onreadystatechange = function (){
            if (xhr.readyState === 4) {// 请求完成
                if (xhr.status >= 200 && xhr.status < 300) {
                    if (dataType === 'json') {
                        let json = JSON.parse(xhr.responseText)// 解析成json对象
                        // success(json)// 执行成功的回调
                        resolve(json)
                    }
                    else if (dataType === 'xml'){
                        // success(xhr.responseXML)// 执行成功的回调
                        resolve(xhr.responseXML)
                    }
                    else{
                        // success(xhr.responseText)// 执行成功的回调
                        resolve(xhr.responseText)
                    }
                } else {
                    // error(xhr.status)// 执行失败的回调
                    reject(xhr.status)
                }
            }
        }
    })
}

</script>
</body>
</html>